<script setup lang="ts">
import {getCurrentInstance, ref} from "vue";
import useUserStore from "@/store/modules/user.ts";


const UserStore = useUserStore()

const {proxy} = getCurrentInstance()
const loginParams = ref({
  username: "admin",
  password: "admin123"
})

// 用户名校验规则
const verifyUsernameRule = (e: any) => {
  console.log(e.target.value)
}
// 密码校验规则
const verifyPasswordRule = (e: any) => {
  console.log(e.target.value)
}

// 登录
const handleLogin = () => {
  UserStore.login(loginParams.value).then((req: any) => {
    proxy.$modal.msgSuccess(req.msg)
  }).catch((err) => {
    proxy.$modal.msgError(req.msg)
  })
}

</script>

<template>
  <div class="app-account">
    <div class="form">
      <div class="h1">统一认证中心</div>
      <div class="from-data">
        <div class="from-item-input">
          <div class="from-icon">
            <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 width="128" height="128">
              <path d="M0 0h1024v1024H0z" fill="#FFFFFF" p-id="950"></path>
              <path
                  d="M307.904 582.144C184.768 640.704 64 812.288 64 928.64c0 50.752 45.888 95.36 98.176 95.36h693.248c52.352 0 98.24-44.608 98.24-95.36 0-31.808-9.6-67.072-25.216-103.04l0.576-0.32c-1.344-2.496-2.816-4.608-4.224-7.104-40.704-88.896-119.808-179.328-202.496-228.096a841.088 841.088 0 0 0-106.432-62.656c-7.168-3.52-12.48-6.016-15.296-7.872l-17.792 20.608L575.616 512l-23.36 26.304c-2.368 22.144 14.208 30.464 37.056 42.048 47.168 23.616 161.856 81.728 248.896 208.256 2.88 4.416 5.696 8.768 8.384 13.184 4.288 6.528 8.128 13.696 12.224 20.608 21.184 38.72 34.432 76.288 34.432 106.24 0 17.6-18.688 34.944-37.824 34.944H162.176c-19.072 0-37.824-17.344-37.824-34.944 0-84.8 98.624-239.232 209.472-291.968"
                  fill="#333333" p-id="951"></path>
              <path
                  d="M512 58.88c-127.104 0-230.528 103.424-230.528 230.528S384.896 519.872 512 519.872s230.528-103.36 230.528-230.464S639.104 58.88 512 58.88m0 519.872a289.664 289.664 0 0 1-289.344-289.344C222.656 129.792 352.448 0 512 0s289.344 129.792 289.344 289.408A289.664 289.664 0 0 1 512 578.752"
                  fill="#333434" p-id="952"></path>
            </svg>
          </div>
          <input class="username" v-model="loginParams.username" @input.stop="verifyUsernameRule"
                 placeholder="请输入用户名">
        </div>
        <div class="from-item-input">
          <div class="from-icon">
            <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 width="128" height="128">
              <path d="M0 0h1024v1024H0z" fill="#FFFFFF"></path>
              <path
                  d="M512.32 80.768c112.256 86.08 216.512 124.352 373.952 124.864v323.264c0 169.344-208.96 427.456-374.016 427.456-59.584 0-124.992-30.784-187.904-86.528l-42.496 47.936c73.6 65.28 153.088 102.656 230.4 102.656 203.712 0 438.016-289.408 438.016-491.456V141.696H889.6c-145.536 0-237.184-33.664-340.288-113.152L531.712 15.04 512.192 0.128l-36.928 28.416C372.352 108.032 280.576 141.696 134.4 141.696h-60.672v387.264c0 62.848 25.856 140.992 70.4 218.048-0.768-1.28 13.888 24.32 17.344 30.016l3.776 6.016c6.4 9.984 13.44 19.584 24.64 33.408l49.792-40.192a317.44 317.44 0 0 1-20.544-27.712l-2.944-4.736a2540.352 2540.352 0 0 1-16.64-28.864c-39.424-68.096-61.824-135.936-61.824-186.048v-323.2c158.016-0.512 262.4-38.784 374.592-124.928z"
                  fill="#333434" p-id="1107"></path>
              <path d="M287.872 457.152l-43.712 46.72 238.656 223.744 300.224-378.432-50.112-39.808-257.088 324.032z"
                    fill="#333333" p-id="1108"></path>
            </svg>
          </div>
          <input class="password" v-model="loginParams.password" type="password" @input.stop="verifyPasswordRule"
                 placeholder="请输入密码"/>
        </div>
        <div class="remember-password">
          <checkbox>记住密码</checkbox>
        </div>
        <div class="from-item-btn">
          <button @click="handleLogin">登录</button>
          <button>注册</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "./account.css";
/* 统一认证界面 */
.app-account {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(to left, #a8edea 0%, #fed6e3 100%);

  .form {
    /*相对定位*/
    position: relative;
    width: 500px;
    height: 500px;
    margin: auto;
    padding: 20px;
    top: calc(100vh / 2 - 250px);
    background-color: #F9F9F9;
    /*圆角*/
    border-radius: 20px;
    /*阴影*/
    box-shadow: 0 0 10px #ccc;

    .h1 {
      text-align: center;
      font-family: STXinwei, "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu, serif;
      margin-bottom: 66px;
    }
  }
}

/*用户名密码框样式*/
.from-data {
  .from-item-input {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 45px;
    background-color: #FFFFFF;
    border-radius: 23px;
    /*超出部分隐藏*/
    overflow: hidden;
    //padding: 5px;
    margin-bottom: 30px;
    /*凹陷背景*/
    box-shadow: 0 0 6px #ccc;
  }

  .remember-password {
    width: 100%;
    height: 50px;
  }


  .from-item-btn {
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;

    button {
      width: 100px;
      height: 100%;
      background-color: #FFFFFF;
      outline: none;
      cursor: pointer;
      border-radius: 8px;
      /*盒子阴影*/
      box-shadow: 0 0 10px #ccc;
    }
  }


  input {
    width: 100%;
    height: 45px;
    padding: 5px;
    background-color: #FFFFFF;
    //border: 1px solid #ccc;
    //border-radius: 5px;
    //margin-bottom: 10px;
  }
}


.from-icon {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  width: 20px;
  height: 20px;
}
</style>
